<template>
  <div class="location-detail">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>
        <router-link to="/user/location">党建地点</router-link>
      </el-breadcrumb-item>
      <el-breadcrumb-item>党建地点详细信息</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="detail-card" v-if="location">
      <div class="image-container">
        <img :src="location.photo" class="location-photo" alt="Location Photo" />
      </div>
      <div class="location-info">
        <h2 class="location-name">{{ location.name }}</h2>
        <p>位置: {{ location.address }}</p>
        <p>类型: {{ location.type }}</p>
        <p>预约人数: {{ location.number }} 人</p>
        <p>创建时间: {{ location.createTime }}</p>
        <p>更新时间: {{ location.updateTime }}</p>
        <el-button type="primary" @click="editLocation">编辑地点</el-button>
        <el-button type="danger" @click="deleteLocation">删除地点</el-button>
      </div>
    </el-card>

    <el-dialog title="提示" :visible.sync="isDeleteDialogVisible" @close="isDeleteDialogVisible = false">
      <span>确定删除此地点吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDeleteDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmDelete">确定</el-button>
      </span>
    </el-dialog>

    <!-- 展示传递过来的信息 -->
    <div class="debug-info" v-if="debugInfo">
      <h4>传递的地点信息:</h4>
      <p><strong>地点 ID:</strong> {{ debugInfo.locationId }}</p>
      <p><strong>地点名称:</strong> {{ debugInfo.locationName }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { selectByNameService } from '@/api/location'; // 引入 API 服务
import { ElMessage } from 'element-plus';

const route = useRoute();
const location = ref(null);
const isDeleteDialogVisible = ref(false);
const debugInfo = ref({}); // 用于存储调试信息

const fetchLocationByName = async () => {
  const locationId = route.params.locationId; 
  const locationName = route.params.locationName; // 获取传递的地点名称

  // 保存传递的信息
  debugInfo.value = {
    locationId,
    locationName
  };

  try {
    const response = await selectByNameService(locationName); // 根据名称获取地点信息
    location.value = response.data; // 假设返回的数据在data字段内

    if (!location.value) {
      ElMessage.error('没有找到该地点');
    }
  } catch (error) {
    ElMessage.error('获取地点信息失败');
  }
};

const deleteLocation = () => {
  isDeleteDialogVisible.value = true;
};

const confirmDelete = async () => {
  // 此处可以添加删除逻辑
  ElMessage.success('地点删除成功');
  // 删除后跳转回地点列表页面
  router.push('/user/location');
};

const editLocation = () => {
  const locationId = location.value.id; 
  router.push({ name: 'EditLocation', params: { locationId } }); // 假设你已经设置了 EditLocation 路由
};

onMounted(fetchLocationByName);
</script>

<style scoped>
.location-detail {
  margin: 20px;
}

.detail-card {
  padding: 20px;
  display: flex;
}

.image-container {
  width: 200px; /* 固定图片容器宽度 */
  height: 200px; /* 固定图片容器高度 */
  overflow: hidden; /* 隐藏超出部分 */
}

.location-photo {
  width: 100%; /* 图片宽度占满容器 */
  height: 100%; /* 图片高度占满容器 */
  object-fit: cover; /* 保持图片比例并裁剪 */
  border-radius: 5px; /* 照片圆角 */
}

.location-info {
  padding-left: 20px;
}

.location-name {
  color: #42b983;
}

.debug-info {
  margin-top: 20px; /* 给调试信息留点空间 */
  padding: 10px;
  border: 1px solid #f0f0f0;
  background-color: #f9f9f9;
}
</style>
